<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        .container{
            width: 100%;
        }
        h3{
            font-size: 25px;
            text-align: center;
            padding: 30px 0;
        }
        p{
            font-size: 15px;
            color: #999;
            text-align: center;
            padding: 10px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            padding: 10px 0;
            /*元素居中  */
            margin: 0 auto;
            /* 弹性布局 全部居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;            

            font-size: 20px;
        }
        .row input{
            font-size: 20px;
            width: 300px;
            height: 40px;

            line-height: 40px;
            /* 输入框的开始间隔 */
            text-indent: 0.5em;
            /* 去掉输入框的轮廓线 */
            outline: none;
        }
        .row #btn{
            width: 300px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            /* 圆角 */
            border-radius: 10px;
            
        }
        /* 伪类选择器  点击触发*/
        .row #btn:active{
            background-color: gray;
        }
    </style>
    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交,会将信息显示在表格中</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div><div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="btn">提交</button>
        </div>
    </div>
    <script>
        //当用户点击按钮就会获取到input中的内容,然后把内容构造成一个div打印到下面
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            //获取所有的输入内容
            let inputs = document.querySelectorAll('input');
            let one = inputs[0].value;
            let two = inputs[1].value;
            let three = inputs[2].value;
            if(one == '' || two == '' || three == ''){
                //用户还没写完
                return;
            }
            //添加一个新的节点
            let newDiv = document.createElement('div');
            newDiv.innerHTML = one + "对" + two + "说:" + three;
            // 再使用下上面已经写好的样式
            newDiv.className = 'row';
            //放到一个父节点里面
            let container = document.querySelector('.container');
            container.appendChild(newDiv);

            //3.清空之前的内容
            for(let i = 0;i < inputs.length;i ++){
                inputs[i].value = '';
            }

            //前面写的都是通过div.row来保存的信息,而这些内容是挂在dom树上的,就是在内存中,很容易丢失,一旦页面刷新/关闭,数据也就没了
            //而想要保存这些内容有以下解决方案:
            //1/可以把提交的数据,保存在浏览器本地,(浏览器提供了localStorge/indexDB这样的机制,能够实现本地存储)本质上,是通过浏览器把呀存储的数据存到了当前电脑的磁盘上
            //但是这样的问题只有自己在当前电脑上才能看到
            //2.可以把提交的数据通过网络通信传输给服务器,由服务器进行保存1)服务器保存在内存中(电脑一关也就没了所以还是后面的可行)2)服务器保存在文件中3)服务器保存在数据库中
        }

    </script>
</body>
</html>